<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<!--common---start-->
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!--common---end-->
	<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-btn {
				padding: 10px;
			}
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
		</style>
		
	</head>
	<body ng-app="mainApp" ng-controller="navigationCtrl" >
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 class="mui-title">导航页</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<p>
					您好，欢迎登录珠宝APP。
					<ul>
						<li>您可以点击下列模块进入相关页面。</li>
					</ul>
				</p>
			</div>

			<div class="mui-content-padded">
				<button ng-click="goodsListBtn()"   class="mui-btn mui-btn-block mui-btn-primary">商品查询</button>
				<button ng-click="goodsDetails()"   class="mui-btn mui-btn-block mui-btn-primary">商品详情</button>
				<button ng-click="shopingCartList()"   class="mui-btn mui-btn-block mui-btn-primary">我的购物车</button>
				<button ng-click="messageList()"   class="mui-btn mui-btn-block mui-btn-primary">我的消息</button>
			</div>
		</div>
		<div id="pageBottom">
		</div>
	</body>
		<script>	
			mui.init();
			mainApp.controller('navigationCtrl', function($scope) {
				(function($, doc) {
					$.init({
						statusBarBackground: '#f7f7f7'
					});
					$scope.goodsListBtn=function(){
						//pageBottom.import.div.innerHTML
						$("#pageBottom").load("../html/bottom.html");
						/*$.openWindow({
								url: 'goodsList.html',
								id: 'goodsList',
								preload: true,
								show: {
									aniShow: 'pop-in'
									
									
								},
								styles: {
									popGesture: 'hide'
								},
								waiting: {
									autoShow: false
								}
						});*/
					}

					
					//商品详情
					$scope.goodsDetails = function() {
						$.openWindow({
								url: 'goodsDetails.html',
								id: 'goodsDetails',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
						});
					}
					//我的购物车
					$scope.shopingCartList=function(){
						$.openWindow({
								url: 'shoppingCart.html',
								id: 'shoppingCart',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
						});
					}
					
					//商品详情
					$scope.goodsDetails = function() {
						$.openWindow({
								url: 'goodsDetails.html',
								id: 'goodsDetails',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
						});
					}
					//我的购物车
					$scope.shopingCartList=function(){
						$.openWindow({
								url: 'shoppingCart.html',
								id: 'shoppingCart',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
						});
					}

					//我的消息
					$scope.messageList = function(){
						$.openWindow({
								url: 'messageList.html',
								id: 'messageId',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
						});
					}
					
				}(mui, document));
			});
		</script>
</html>
